<template>
    <div class="ve_home">
        <el-dialog
            :model-value="verificationCode !== wechat_verification_code"
            title="关注公众号获取验证码"
            width="500"
            draggable
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
        >
            <el-image :src="require('../static/WeChat.png')"></el-image>
            <span>回复关键字【{{ wechat_key_word }}】获取验证码</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-input v-model="verificationCode" autocomplete="off" />

                    <el-button type="primary" @click="verification">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-row>
            <el-col :span="24">
                <dashboard />
            </el-col>
            <!--            <el-col :span="8">-->
            <!--                <el-calendar class="ve_calendar"></el-calendar>-->
            <!--            </el-col>-->
        </el-row>
        <!--        <live-chart />-->
    </div>
</template>

<script setup>
import dashboard from "@/components/dashboard/Shortcuts";
import { computed } from "vue";
import store from "@/store";
import {
    SET_VERIFICATION_CODE,
    SET_WECHAT_KEY_WORD,
    SET_WECHAT_VERIFICATION_CODE,
} from "@/store/modules/app/type";
import { ElMessage } from "element-plus";

/**
 * 卫星公众号验证码
 * @type {WritableComputedRef<(function(*): *)|*>}
 */
const wechat_verification_code = computed({
    get: () => store.getters.wechat_verification_code,
    set: (value) =>
        store.dispatch(`app/${SET_WECHAT_VERIFICATION_CODE}`, value),
});
/**
 * 微信公众号关键字
 * @type {WritableComputedRef<(function(*): *)|*>}
 */
const wechat_key_word = computed({
    get: () => store.getters.wechat_key_word,
    set: (value) => store.dispatch(`app/${SET_WECHAT_KEY_WORD}`, value),
});

/**
 * 获取本地验证码
 * @type {WritableComputedRef<(function(*): *)|*>}
 */
const verificationCode = computed({
    get: () => store.getters.verification_code,
    set: (value) => store.dispatch(`app/${SET_VERIFICATION_CODE}`, value),
});

const verification = () => {
    if (verificationCode.value === wechat_verification_code.value) {
        ElMessage.success("验证成功");
    } else {
        ElMessage.error("验证码错误:" + verificationCode.value);
    }
};
</script>

<style lang="scss" scoped>
.ve_calendar {
    background: #f56c6c;
    border-radius: 10px;

    &:hover {
        box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
    }

    :deep(.el-calendar__body) {
        padding-bottom: 12px !important;

        .el-calendar-day {
            height: auto !important;
        }

        .el-calendar-table td {
            border: none;
            text-align: center;
        }
    }
}
</style>
